<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <title>MegaRadio</title>
<!--        <style type="text/css" media="screen">@import "jqtouch/themes/css/apple.css";</style>-->
        <link rel="stylesheet" href="jqtouch/themes/css/jqtouch.css" title="jQTouch">
        <script src="jqtouch/src/lib/zepto.js" type="text/javascript" charset="utf-8"></script>
        <script src="jqtouch/src/jqtouch.js" type="text/javascript" charset="utf-8"></script>

        <!--
            jQTouch Clock Demo
            All custom code is embedded below:
        -->
<!--        <link rel="stylesheet" href="jqtouch/demos/clock/clock.css" type="text/css" media="screen" charset="utf-8" />-->
        <script type="text/javascript" charset="utf-8">
            $.core = $.jQTouch({
                //icon: 'icon.png',
                //startupScreen: 'img/startup.png',
                statusBar: 'black-translucent'
            });

            $(function(){
                $("a.radio-station").tap(function(e){
                    //alert('tapped');
                   
                    $('#radioplayer .js_pagetitle').text($(e.target).text());
                    setStation($(e.target).attr('rel'));
                    $.core.goTo($('#radioplayer'), 'slideleft');
                    e.preventDefault();
                });


                var audioPlayer = null;
                function setStation(src_radio_flow){
                    var pl = getPlayer();
                    pl.src = src_radio_flow;
                    pl.load();
                    pl.play();
                    
                }
                function getPlayer(){
                    if(!audioPlayer){
                        audioPlayer = new Audio();
                        audioPlayer.controls="controls";
                        document.getElementById("player").appendChild(audioPlayer);
                    }
                    return audioPlayer;
                }
            });
            
        </script>
<style>
    #radioplayer audio{
        width: 90%;
        padding: 5%;
        padding-top: 30%;
/*        height: 300px;*/
    }
    .logos div{
        display: block;
        padding: 2px;
        float: left;
        border: 1px solid #464646;

        border-radius: 5px;
        margin: 5px;

    }
    .logos a {
        display: block;
        width: 100px;
        height: 80px;                
    }
</style>
    </head>
    <body>
        <div id="jqt">
            <div id="home">
                <div class="toolbar">
                    <h1>Radio</h1>
                    <a href="#info" class="button leftButton flip">Info</a>
                    <a href="#add" class="button add slideup">+</a>
                </div>
                <div class="scroll">
                    <h2>Популярные радиостанции</h2>
                    <ul class="rounded">
                        <li class="arrow"><a class="radio-station" rel="http://scfire-dtc-aa04.stream.aol.com/stream/1008?r=705946"
                                             href="#goa">Goa-psy trance</a> </li>
                        <li class="arrow"><a class="radio-station" rel="tsoy.mp3" href="#tsoy">Кино - песня без слов</a></li>
                        <li class="arrow"><a class="radio-station" rel="http://stream.kissfm.ua:8000/kiss?r=1337445907314" href="#kissfm">KissFm (UA)</a></li>
                        <li class="arrow"><a href="#callbacks">Events <small class="counter">4</small></a></li>
                        <li class="arrow"><a href="#extensions">Extensions <small class="counter">4</small></a> </li>
                        <li class="arrow"><a href="#demos">Demos <small class="counter">2</small></a></li>
                        <li class="arrow"><a href="#themes">Themes <small class="counter">2</small></a></li>
                    </ul>
                   <h2>Категории</h2>
                   <ul class="rounded">
                       <li class="arrow"><a href="#ua">Украина <small class="counter">4</small></a> </li>
                   </ul>
                    <ul class="individual">
                        <li><a target="_blank" href="http://vk.com/doubledragons">Svyatoslavik</a></li>
                        <li><a target="_blank" href="http://twitter.com/!#/beedesk">@beedesk</a></li>
                    </ul>
                    <div class="info">
                        <p>Add this page to your home screen <br>for a richer experience.</p>
                    </div>
                </div>
            </div>
            <div id="ua">
                <div class="toolbar">
                    <h1 class="">Украинское радио</h1>
                    <a class="back" href="#home">Назад</a>
                </div>
                <div class="scroll logos">
                    <div>
                <a style="background-image: url('logos/kissfm.jpg')" class="radio-station" rel="http://stream.kissfm.ua:8000/kiss?r=1337445907314" href="#kissfm">
                           
                </a>
                    </div>
                    <div>
                <a style="background-image: url('logos/mfm.jpg')" class="radio-station" rel="http://urg.adamant.net:8080/online128?r=1337442919636" href="#mfm">
                           
                </a>

                    </div>
                       <div>
                <a style="background-image: url('logos/avtoradioua.jpg')" class="radio-station" rel="http://cast.radiogroup.com.ua:8000/avtoradio?r=1337443218926" href="#autoradioua">

                </a>

                    </div>
                </div>
            </div>
            <div id="radioplayer">
                <div class="toolbar">
                    <h1 class="js_pagetitle">Radio station</h1>
                    <a class="back" href="#home">Назад</a>
                </div>
                <div class="scroll">
                    <div id="player"></div>
                </div>
            </div>
            
        </div>
    </body>
</html>